<template>
    <view class="wallpaper-page">
        <scroll-view scroll-y class="w-screen bg-gray-50 wallpaper-content" :scroll-top="scrollTop">
            <view class="container">
                <view v-for="(item, index) in wallpapers" :key="index" class="image-wrapper">
                    <image :src="item" mode="widthFix" class="wallpaper-image" @tap="previewImage(index)" />
                </view>

                <!-- 下一页按钮 -->
                <view class="btn-wrapper">
                    <view
                        @click="loadNextPage"
                        class="next-btn bg-gradient-to-r from-green-400 to-green-500 hover:from-green-500 hover:to-green-600"
                    >
                        随机一页
                    </view>
                </view>
            </view>
        </scroll-view>
        <CustomTabBar />
    </view>
</template>

<script setup lang="ts">
    import { ref } from "vue"
    import { baseURL } from "@/api/api"
    import CustomTabBar from "@/components/CustomTabBar.vue"
    import { onShow } from "@dcloudio/uni-app"

    // 隐藏导航栏左侧返回按钮
    onShow(() => {
        // @ts-ignore
        if (typeof wx !== 'undefined' && wx.hideHomeButton) {
            // @ts-ignore
            wx.hideHomeButton();
        }
    });

    const wallpapers = ref<string[]>([])
    const page = ref(1)
    const scrollTop = ref(0)

    // 从API获取图片列表
    const loadImages = async (pageNum: number) => {
        try {
            const response = await uni.request({
                url: baseURL + "/article/img/get/link",
                method: "GET",
                data: {
                    page: pageNum,
                },
            })
            if (response.data && Array.isArray(response.data)) {
                wallpapers.value = response.data
            }
        } catch (error) {
            console.error("获取图片列表失败:", error)
        }
    }

    const loadNextPage = async () => {
        page.value++
        await loadImages(page.value)
        // 滚动到顶部 - 先设置一个不同的值，再设置为0，触发滚动
        scrollTop.value = Math.random()
        setTimeout(() => {
            scrollTop.value = 0
        }, 100)
    }

    const previewImage = (index: number) => {
        uni.previewImage({
            current: wallpapers.value[index],
            urls: wallpapers.value,
            showmenu: true,
        })
    }

    // 初始加载
    loadImages(page.value)

    uni.showShareMenu({
        withShareTicket: true,
        menus: ["shareAppMessage", "shareTimeline"],
    })
</script>

<style>
    .wallpaper-page {
        position: relative;
        height: 100vh;
    }

    .wallpaper-content {
        padding-bottom: 120px;
        height: 100%;
    }

    /* 保持原有容器和图片样式 */
    .container {
        padding: 48rpx 32rpx;
        background-color: #f9fafb;
    }

    .image-wrapper {
        margin-bottom: 32rpx;
        border-radius: 16rpx;
        overflow: hidden;
        background: white;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
        display: flex;
        justify-content: center;
    }

    .image-wrapper:last-child {
        margin-bottom: 16rpx;
    }

    .wallpaper-image {
        width: 90vw;
        display: block;
        border-radius: 12rpx;
    }

    /* 按钮容器样式 */
    .btn-wrapper {
        display: flex;
        justify-content: center;
        padding: 32rpx 0;
        margin-bottom: 100rpx; /* 按钮距离底部约25px */
    }

    /* 下一页按钮样式 */
    .next-btn {
        padding: 24rpx 96rpx;
        border-radius: 100rpx;
        color: white;
        font-size: 32rpx;
        font-weight: 500;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        min-width: 60%;
        text-align: center;
    }

    .next-btn:active {
        transform: translateY(2rpx);
        box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
    }
</style>
